<template>
    <el-form :model="form"
             :rules="rules"
             size="mini"
             label-position="left"
             label-width="80px"
             ref="form"
    >

        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"/>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
            <el-radio :label="0" v-model="form.sex">女</el-radio>
            <el-radio :label="1" v-model="form.sex">男</el-radio>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
            <el-input-number v-model.number="form.age" :min="1"/>
            <div>30岁以上不能在软件部</div>
        </el-form-item>

    </el-form>
</template>

<script>
    export default {
        created() {
            Object.assign(this.form, this.recorder);
        },
        data() {
            return {
                form: {
                    name: null,
                    sex: 0,
                    age: null,
                },
                rules: {
                    name: [
                        {required: true},
                    ],
                    sex: [
                        {required: true},
                    ],
                    age: [
                        {required: true, type: 'number'},
                    ],
                },
            };
        },
        methods: {
            async validate () {
                await this.$refs.form.validate();
                return Object.assign({}, this.form);
            },
        },
        watch: {
            'form.age' (newValue) {
                this.$emit('age-change', newValue);
            },
        },
        props: {
            recorder: {
                type: Object,
                default: () => {
                },
            },
        },
    };
</script>
